import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Box, Wrapper, Content, Title } from './style'

class initLoading {
  init (dom) {
    dom.innerHTML = '<div class="loader"><div class="loader-inner ball-spin-fade-loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>'
    dom.style.backgroundColor = '#039'
    dom.children[0].style.width = '100%'
    dom.children[0].style.height = '100%'
    dom.children[0].style.top = '-10px'
    dom.children[0].style.transform = 'scale(0.35)'
  }
}
const loadingDom = new initLoading()

class Loading extends PureComponent {
  componentDidMount () {
    loadingDom.init(this.loadingContent)
  }

  render () {
    const { title, show } = this.props

    return (
      <Box className={show ? '' : 'hide'} >
        <Wrapper>
          <Content innerRef={content => this.loadingContent = content}></Content>
          <Title>{title}</Title>
        </Wrapper>
      </Box>
    )
  }
}

Loading.propTypes = {
  title: PropTypes.string,
  show: PropTypes.bool
}

Loading.defaultProps = {
  title: '加载中',
  show: true
}

export default Loading
